<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>小米商城</title>
		<style type="text/css">
			body,ul{
				padding: 0;
				margin: 0;
			}
			a{
				text-decoration: none;
			}
			li{
				list-style: none;
			}
			input{
				border: none;
				outline: none;
			}
			.header{
				height: 52px;
				width: 100%;
				background-color: black;
				}
				.left{
					height: 50px;
					width: 70%;
					float: left;
					background-color: #F0FFFF;
				
				}
				.right{
					height: 50px;
					width: 30%;
					float: right;
					background-color: #FAEBD7;
				}
				.left li{
					float: left;
					margin-left:8px ;
				}
				.left a{
					line-height: 40px;
					color: #b0b0b0;
					font-size: 10px;
				}
				.left ul{
					margin-left: 260px;
				}
				.left li a:hover{
					color: #000000;
					font-size: 15px;
				}
				.right li{
					float: left;
					margin-right: 3px;
				}
				.right a{
					line-height: 40px;
					color: #B0B0B0;
					font-size: 10px;
				}
			
				.right ul{
					margin-left: 200px;
				}
				.right li a:hover{
					color: #000000;
					font-size: 15px;
					}
					.right img{
						height: 15px;
						width: 15px;
					}
					.center{
						height: 1200px;
						width: 80%;
						background-color: white;
						margin: 0 auto;
					}
					.c1{
						height:5% ;
						width: 100%;
						background-color: aquamarine;
					    margin: 10px auto;
					}
					.c1-left{
						height: 10px;
						width: 10%;
					
					}
					.c1-center{
						height:30px ;
						width: 75%;
						margin: 5px;
					}
					.c1-right{
						width: 15%;
						float: right;
					}
				.c1-center li{
					float: left;
					margin-left:10px ;
				}
				.c1-center a{
					line-height: 40px;
					color: #b0b0b0;
					font-size: 15px;
				}
				.c1-center ul{
					margin-left: 280px;
				}
				.c1-center li a:hover{
					color: #000000;
					font-size: 15px;
				}
				.c2{
					height: 300px;
					width: 100%;
					display: flex;
					margin: 8px auto;
				}
				.c2-left{
					height: 300px;
					width: 25%;
					background-color: #B0B0B0;
					text-align: center;
					line-height: 28px;
				}
				.c2-left li a:hover{
					color: #000000;
					font-size: 15px;
				}
				.c2-right img{
					height: 300px;
					width: 100%;
					float: right;
				}
				.c3{
					height: 280px;
					width: 100%;
					display: flex;
					margin: 8px auto;
				}
				.c3-left{
					height: 280px;
					width: 20%;
					background-color: #808080;
					float: left;
				}
				.c3-right{
					height: 280px;
					width: 80%;
					display: flex;
				}
				.c3-right-1 img{
					height: 280px;
					width: 100%;
					float: right;
				}
				.c3-right-2 img{
					height: 280px;
					width: 100%;
					float: right;
				}
				.c3-right-3 img{
					height: 280px;
					width: 100%;
					float: right;
				}
				.c4{
					height: 260px;
					width: 100%;
					margin: 8px auto;
				}
				.c4-left{
					height: 50px;
					width: 100%;
					background-color: #B0B0B0;
					line-height: 40px;
				}
				.c4-center{
					height: 210px;
					width: 100%;
					margin: 8px;
					display: flex;
				}
				.c4-center-1{
					height: 200px;
					width: 16%;
					background-color: #F08080;
					margin: 0 8px;
				}
				.c4-center-2{
					height: 200px;
					width: 100%;
					display: flex;
					margin: 2px 20px;
				}
				.c4-center-3{
					height: 200px;
					width: 100%;
					display: flex;
					margin: 2px 30px;
				}
				.c4-center-4 img{
					height: 200px;
					width: 100%;
					display: flex;
					margin: 2px 18px;
					
				}
				.c4-center-5{
					height: 200px;
					width: 100%;
					display: flex;
					margin: 2px 60px;
				}
				.c5{
					height: 100px;
					width: 100%;
				}
		</style>
	</head>
	<body>
		<div class="header">
			<div class="left">
				<ul>
					<li><a href="">小米商城</a></li>
					<li><a href="">MIUI</a></li>
					<li><a href="">IOT</a></li>
					<li><a href="">云服务</a></li>
					<li><a href="">天行数科</a></li>
					<li><a href="">有品</a></li>
					<li><a href="">小爱开放平台</a></li>
					<li><a href="">企业团购</a></li>
					<li><a href="">资质证照</a></li>
					<li><a href="">协议规则</a></li>
					<li><a href="">下载APP</a></li>
					<li><a href="">智能生活</a></li>
					<li><a href="">Select Location</a></li>
				</ul>
			</div>
			<div class="right">
				<ul>
					<li><a href="">登录</a></li>
					<li><a href="">注册</a></li>
					<li><a href="">消息通知</a></li>
					<li><img src="img/692a6c3b0a93a24f74a29c0f9d68ec71.png"><a href="">购物车(0)</a></li>
				</ul>
			</div>
		</div>
		<div class="center">
			<div class="c1">
				<div class="c1-left "><img src="img/footer/logo-footer.png" ></div>
				<div class="c1-center ">
					<ul>
					<li><a href="">小米手机</a></li>
					<li><a href="">Redmi红米</a></li>
					<li><a href="">电视</a></li>
					<li><a href="">笔记本</a></li>
					<li><a href="">家电</a></li>
					<li><a href="">路由器</a></li>
					<li><a href="">智能硬件</a></li>
					<li><a href="">服务</a></li>
					<li><a href="">社区</a></li>
					</ul>
				</div>
				<div class="c1-right "><input type=""</div>
			</div>
			<div class="c2">
				<div class="c2-left">
				<ul>
					<li><a href="">手机 电话卡</a></li>
					<li><a href="">电视 盒子</a></li>
					<li><a href="">笔记本 显示器</a></li>
					<li><a href="">家电 插线板</a></li>
					<li><a href="">出行 穿戴</a></li>
					<li><a href="">智能 路由器</a></li>
					<li><a href="">电源 配件</a></li>
					<li><a href="">健康 儿童</a></li>
					<li><a href="">耳机 音箱</a></li>
					<li><a href="">生活 箱包</a></li>
				</ul>
				</div>
				<div class="c2-right"><img src="img/0ef4160c861b998239bce9adb82341e7.jpg"/></div>
			</div>
			<div class="c3">
				<div class="c3-left"></div>
				<div class="c3-right">
					<div class="c3-right-1"><img src="img/e5f20a62c3d5b3d6806bd51ab6c5dd12.jpg"></div>
					<div class="c3-right-2"><img src="img/8a43378b96501d7e227a9018fe2668c5.jpg"></div>
					<div class="c3-right-3"><img src="img/793913688bfaee26b755a0b0cc8575fd.jpg"></div>
				</div>
			</div>
			<div class="c4">
				<div class="c4-left">小米闪购</div>
				<div class="c4-center">
					<div class="c4-center-1"></div>
					<div class="c4-center-2"><img src="img/b8c63a2024528fe5410ebe669b7d2407.jpg"</div>
					<div class="c4-center-3"><img src="img/74e573c4c0d89048392d14831cc507d5.jpg"></div>
					<div class="c4-center-4"><img src="img/section/mian1/xm1-1.jpg"></div>
					<div class="c4-center-5"><img src="./img/5dd69c0a-8f4a-b42f-d840-6c5a47f2cd03_200x200.jpg"></div>
				</div>
			</div>
				<div class="c5"><img src="img/a59db7dac2804ee2b5c7be1b02b3770e.jpg"></div>
		</div>
		<div class="footer"></div>
	</body>
</html>
